<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" />
<script src="${pageContext.request.contextPath}/layui/jquery2.1.1.js"></script>
<script src="${pageContext.request.contextPath}/layui/lay/modules/layer.js"></script>
<script src="${pageContext.request.contextPath}/layui/lay/modules/table.js"></script>
<script src="${pageContext.request.contextPath}/layui/lay/modules/form.js"></script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>采购管理</li>
    <li>品牌管理</li>
    <li>基本内容</li>
  </ul>
</div>
<div class="rightinfo">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">品牌名称</label>
      <div class="layui-input-inline">
        <input type="text" id="name" name="name" autocomplete="off" class="layui-input" >
      </div>
      <label class="layui-form-label">状态</label>
      <div class="layui-input-inline" >
        <select id="status" name="status" lay-verify="required">
          <option value="0">请选择</option>
          <option value="1">可用</option>
          <option value="2">不可用</option>
        </select>
      </div>
      <div class="layui-btn-container">
        <button type="button" class="layui-btn btn-search"><i class="layui-icon">&#xe615;</i>查询</button>
        <button type="button" class="layui-btn btn-add" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
      </div>
    </div>
  </form>
  <table id="PurchaseTable" lay-filter="PurchaseTable"></table>
</div>
<script>
  layui.use(['table', 'form','laydate'], function () {
    var table = layui.table,
            form = layui.form,
            util = layui.util,
            laydate = layui.laydate,
            $ = layui.jquery;
    form.render();

    // 添加按钮
    $('.btn-add').on('click', function () {
      layer.open({
        type: 2,
        shift: 2,
        title: '添加信息',
        area: ['1100px', '730px'],
        closeBtn: 1,
        shadeClose: false,
        content: 'http://localhost:8080/purchase/brand/brandAdd.jsp',
        cancel: function () {
          layer.closeAll()
          $('.btn-search').click();
        }
      });
      form.render();
    });
      //第一个实例
      table.render({
        elem: '#PurchaseTable'
        , height: 400
        , url: '/Brand/getAllBrandList' //数据接口
        , cols: [[ //表头
          {field: '_id', title: '序号', width:120, type:"numbers", fixed: 'left',align: "center" }
          ,{field: 'id', title: '序号', width: 120, sort: true, fixed: 'left', align: "center"}
          , {field: 'name', title: '品牌名称', width: 250, sort: true, align: "center"}
          , {field: 'status', title: '状态', width: 200, align: "center",
            templet: function (res) {
              if (res.status == '1') {
                return '可用';
              }
              if (res.status == '2') {
                return '不可用';
              }
            }
          }
          , {field: 'createTime', title: '创建时间', width: 283, align: "center",
            templet:function(res){
              if(res.createTime != null){
                return util.toDateString(res.createTime, "yyyy-MM-dd HH:mm:ss")
              }else{
                return ""
              }
            }}
          , {field: 'createPerson', title: '创建人', width: 230, align: "center"}
          , {title: '操作', width: 230, toolbar: '#barDemo', align: "center"}
        ]]
        , page: true //开启分页
        , limit: 5 //默认分页条数
        , limits: [10, 20, 30] //自定义分页数据选项
        , id: 'PurchaseTable', //用于绑定模糊查询条件等等
        done: function () {
          $("[data-field='id']").css('display','none');
          table.resize('PurchaseTable');
        }
      });
    //查询
    $('.btn-search').on('click', function () {
      var name = $('#name').val();
      var status = $('#status').val();
      table.reload('PurchaseTable', {
        url: '/Brand/getAllBrandList',
        method: 'post',
        dataType: 'json',
        where: { //设定异步数据接口的额外参数，任意设
          name: name,
          status: status,
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
    });
    form.render();
      //工具条事件
      table.on('tool(PurchaseTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        if (layEvent === 'recover') { //恢复
          layer.confirm('真的恢复么', function (index) {
            layer.close(index);
            //向服务端发送删除指令
            $.ajax({
              url: "/Brand/updateBrandStatus",
              data: {
                id : data.id,
                status: "1"
              },
              type: 'post',
              dataType: 'json',
              success: function (resp) {
                layer.closeAll();
                layer.msg(resp.message, {icon: 6});
              },
              error: function () {
                layer.closeAll();
                layer.msg('系统错误，请联系管理员', {icon: 5});
              }
            });
            $(function () {
              layer.closeAll();
              table.reload('PurchaseTable', {
                where: {},
                data:[]
              });
            });
            return false;
          });
        } else if (layEvent === 'del') { //注销
          layer.confirm('真的注销么', function (index) {
            layer.close(index);
            //向服务端发送删除指令
            $.ajax({
              url: "/Brand/updateBrandStatus",
              data: {
                id : data.id,
                status: "2"
              },
              type: 'post',
              dataType: 'json',
              success: function (resp) {
                layer.closeAll();
                layer.msg(resp.message, {icon: 6});
              },
              error: function () {
                layer.closeAll();
                layer.msg('系统错误，请联系管理员', {icon: 5});
              }
            });
            $(function () {
              layer.closeAll();
              table.reload('PurchaseTable', {
                where: {},
                data:[]
              });
            });
            return false;
          });
        } else if (layEvent === 'edit') { //编辑
          json = JSON.stringify(data);
          layui.use('layer', function () {
            layer.open({
              type: 2,
              shift: 2,
              title: '编辑',
              area: ['1000px', '700px'],
              closeBtn: 1,
              shadeClose: false,
              content: 'purchase/brand/brandUpdate.jsp',
              success: function () {
              },
              cancel: function () {
                layer.closeAll()
                $('.btn-search').click();
              }
            });
          });
        }
      });
  });
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
  {{# if(d.status=='1'){ }}
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">注销</a>
  {{# }else{ }}
  <a class="layui-btn layui-btn-xs" lay-event="recover">恢复</a>
  {{# } }}
</script>
</body>
</html>
